<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收货地址</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
		<script type="application/javascript" src="../js/flexible.debug.js"></script>
		<script type="application/javascript" src="../js/flexible_css.debug.js"></script>
		<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="../js/querystring.min.js"></script>
		<script type="text/javascript" src="../js/cfg.js"></script>
		<link rel="stylesheet" href="../css/layout.css">
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div v-if="list==''">
					<p class="width478 height340 mg-t188 displayTable"><img src="../img/addressnull.png" alt="空" class="width100p height100p"></p>
					<p class="color999 textCenter font26 mg-t22">您还没有创建地址哟~</p>
				</div>
				<ul class="backgroundcolorfff" v-if="list">
					<li class="list-item pad-tb30 content" v-for="(item,index) in list " data-type="0">
						<input type="radio" class="width128" name="" :id="item.id" :value="index" @focus="inputFocus" v-model="radio" :class="index==radio?'opction0':''" @click="checkradio(item.id)" />
						<van-icon name="checked" color="#f44" size="0.6rem" :class="index==radio?'':'hideicon'"/>
						<label class="width100 height100p displayFlex" :for="item.id" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
							<div class="list-box height100p"   >
								<div class="list-content">
									<p class="font32 color333 letterSpacing1 width100p">
										<span>{{item.ad_consignee}}</span>
										<span class="mg-l30">{{item.ad_phone}}</span>
										<span class="moren" v-if="item.ad_status=='0'"></span>
									</p>
									<p class="font26 color515151 letterSpacing1 width100p mg-t32">
										<span>{{item.ad_province}}{{item.ad_city}}{{item.ad_detail_address}}</span>
										<!-- <span @click="editeItem(item.id)" :data-index="index" class="right mg-r30"><van-icon name="edit" color="#999999" size="0.6rem" /></span> -->
									</p>
								</div>
							</div>
						</label>
						<div class="editicon"><span @click="editeItem(item.id)" :data-index="index" class="right mg-r30"><van-icon name="edit" color="#999999" size="0.6rem" /></span></div>
						<div class="delete">
							<span @click="deleteItem(item.id)" :data-index="index">删除</span>
						</div>
					</li>
				</ul>
				<p class="bottom backgroundcolorf72929 colorfff font30 width702 textCenter height88 lineHeight88 goaddress radious10" @click="onAdd">创建收货地址</p>
			</div>
		</div>
		<script>
			var vant = window.vant;
			var qsd = querystring.parse();
			var cfg = new AppCfg().init({
				isDebug: false,
			});
			var amount = qsd.amount;
			Vue.use(vant);
			new Vue({
				el: '#app',
				data: {
					checked: 0,
					radio: 0,
					list: [],
					startX: 0,
					endX: 0,
				},
				created: function() {
					this.checkaddress();
				},
				methods: {
					checkaddress: function() {
						var that = this;
						cfg.majaxAction("queryAddressInfoList", '', function(res) {
							if (res.data.length > 0) {
								that.list = res.data;
							} else {
								that.list = ""
							}
						});
					},
					inputFocus: function(e) {
						this.radio = e.target.value
						console.log(this.radio)
					},
					checkradio: function(val) {
						window.location.href = "buy.html?addressid=" + val + "&orderType=" + qsd.orderType;
					},
					//跳转
					skip() {
						if (this.checkSlide()) {
							this.restSlide();
						} else {
						}
					},
					//滑动开始
					touchStart(e) {
						// 记录初始位置
						this.startX = e.touches[0].clientX;

					},
					//滑动结束
					touchEnd(e) {
						// 当前滑动的父级元素
						let parentElement = e.currentTarget.parentElement.parentElement;
						// 记录结束位置
						this.endX = e.changedTouches[0].clientX;
						// 左滑
						if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
							this.restSlide();
							parentElement.dataset.type = 1;
						}
						// 右滑
						if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
							this.restSlide();
							parentElement.dataset.type = 0;
						}
						this.startX = 0;
						this.endX = 0;
					},
					//判断当前是否有滑块处于滑动状态
					checkSlide() {
						let listItems = document.querySelectorAll('.list-item');
						for (let i = 0; i < listItems.length; i++) {
							if (listItems[i].dataset.type == 1) {
								return true;
							}
						}
						return false;
					},
					//复位滑动状态
					restSlide() {
						let listItems = document.querySelectorAll('.list-item');
						// 复位
						for (let i = 0; i < listItems.length; i++) {
							listItems[i].dataset.type = 0;
						}
					},
					//删除
					deleteItem(val) {
						// 删除
						var that = this;
						var parm = {
							addressId: val
						}
						cfg.majaxAction("removeAddressById", parm, function(res) {
							// 复位
							that.restSlide();
							that.checkaddress();
						});
					},
					editeItem: function(index) {
						window.location.href = "createAddress.html?addressid=" + index + '&orderType=' + qsd.orderType;
					},
					onAdd() {
						vant.Toast('新增地址');
						window.location.href = "createAddress.html?orderType=" + qsd.orderType;
					},
				},
				filters: {
					formatFixed: function(val) {
						return parseFloat(val).toFixed(2)
					}
				}
			})
		</script>
	</body>
</html>
